<template>
  <div v-if="form.admission_time" class="container">
    <div class="table">
      <h2>基本资料</h2>
      <table>
        <tr>
          <Item
            class="w-25"
            header
            label="入院时间"
            :value="
              formatTime(
                form[config['基本资料']['line1']['入院时间'].key].value,
                'yyyy-MM-dd HH:mm'
              )
            "
          />
          <Item
            class="w-20"
            label="性别"
            label-width="54px"
            :value="
              Number(form[config['基本资料']['line1']['性别'].key].value) === 1
                ? '男'
                : Number(
                    form[config['基本资料']['line1']['性别'].key].value
                  ) === 2
                ? '女'
                : ''
            "
          />
          <Item
            class="w-20"
            label="入院方式"
            label-width="54px"
            :value="form[config['基本资料']['line1']['入院方式'].key].value"
          />
          <Item
            label="由"
            label-width="54px"
            :value="form[config['基本资料']['line1']['由'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="入院诊断"
            :value="form[config['基本资料']['line2']['入院诊断'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="教育"
            :value="
              formatOptions('基本资料', 'line3', '教育选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="宗教"
            :value="
              formatOptions('基本资料', 'line3', '宗教选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="语言"
            :value="
              formatOptions('基本资料', 'line3', '语言选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            class="w-25"
            header
            label="联系人"
            :value="form[config['基本资料']['line4']['联系人'].key].value"
          />
          <Item
            class="w-20"
            label="关系"
            label-width="54px"
            :value="form[config['基本资料']['line4']['关系'].key].value"
          />
          <Item
            label="电话号码"
            label-width="54px"
            :value="form[config['基本资料']['line4']['电话号码'].key].value"
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>健康史</h2>
      <table>
        <tr>
          <Item
            class="w-15"
            header
            label="吸烟"
            :value="form[config['健康史']['line1']['抽烟'].key].value"
          />
          <Item
            class="w-15"
            label=""
            :value="form[config['健康史']['line1']['每天几支'].key].value"
            :unit="config['健康史']['line1']['每天几支'].unit"
          />
          <Item
            class="w-15"
            label="已抽"
            :value="form[config['健康史']['line1']['已抽年数'].key].value"
            :unit="config['健康史']['line1']['已抽年数'].unit"
          />
          <Item
            class="w-15"
            label="戒烟经验"
            :value="form[config['健康史']['line1']['戒烟经验'].key].value"
          />
          <Item
            label="戒烟想法"
            :value="form[config['健康史']['line1']['戒烟想法'].key].value"
          />
        </tr>
        <tr>
          <Item
            class="w-30"
            header
            label="饮酒"
            :value="form[config['健康史']['line1']['喝酒'].key].value"
          />
          <Item
            class="w-10"
            label="量"
            :value="form[config['健康史']['line1']['量'].key].value"
            :unit="
              form[config['健康史']['line1']['量'].key].value
                ? config['健康史']['line1']['量'].unit
                : ''
            "
          />
          <Item
            label="已喝"
            label-width="54px"
            :value="form[config['健康史']['line1']['已喝'].key].value"
            :unit="
              form[config['健康史']['line1']['已喝'].key].value
                ? config['健康史']['line1']['已喝'].unit
                : ''
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="家族史"
            :value="
              formatOptions('健康史', 'line2', '家族病史选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="既往史"
            :value="
              formatOptions('健康史', 'line3', '既往史选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="住院或手术史"
            :value="
              formatOptions(
                '健康史',
                'line4',
                '住院或手术史选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="皮肤"
            :value="
              formatOptions('健康史', 'line4', '皮肤选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item class="w-25" header label="视力" />
          <td class="w-20 flex-col h-40 space-around align-start">
            <div class="flex">
              <label class="text" style="width: 54px">左眼</label>
              <span>:</span>
              <p class="i-b">
                {{ formatOptions('健康史', 'line5', '左选项', '选项', '内容') }}
              </p>
            </div>
            <div class="flex">
              <label class="text" style="width: 54px">右眼</label>
              <span>:</span>
              <p class="i-b">
                {{ formatOptions('健康史', 'line5', '右选项', '选项', '内容') }}
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <Item class="w-25" header label="听力" />
          <td class="w-20 flex-col h-40 space-around align-start">
            <div class="flex">
              <label class="text" style="width: 54px">左耳</label>
              <span>:</span>
              <p class="i-b">
                {{ formatOptions('健康史', 'line6', '左选项', '选项', '内容') }}
              </p>
            </div>
            <div class="flex">
              <label class="text" style="width: 54px">右耳</label>
              <span>:</span>
              <p class="i-b">
                {{ formatOptions('健康史', 'line6', '右选项', '选项', '内容') }}
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <Item
            header
            label="意识"
            :value="form[config['健康史']['line7']['意识'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="性状发育"
            :value="form[config['健康史']['line7']['性状发育'].key].value"
          />
        </tr>
        <tr>
          <Item
            class="w-30"
            header
            label="食物过敏史"
            :value="form[config['健康史']['line8']['食物过敏史选项'].key].value"
          />
          <template
            v-if="
              form[config['健康史']['line8']['食物过敏史选项'].key].value ===
              '有'
            "
          >
            <Item
              :value="
                '食物名称：' +
                form[config['健康史']['line8']['食物过敏史内容'].key].value
              "
            />
            <Item
              :value="
                '表现：' +
                form[config['健康史']['line8']['食物过敏史内容2'].key].value
              "
            />
          </template>
        </tr>
        <tr>
          <Item
            class="w-30"
            header
            label="药物过敏史"
            :value="form[config['健康史']['line9']['药物过敏史选项'].key].value"
          />
          <template
            v-if="
              form[config['健康史']['line9']['药物过敏史选项'].key].value ===
              '有'
            "
          >
            <Item
              :value="
                '药物名称：' +
                form[config['健康史']['line9']['药物过敏史内容'].key].value
              "
            />
            <Item
              :value="
                '表现：' +
                form[config['健康史']['line9']['药物过敏史内容2'].key].value
              "
            />
          </template>
        </tr>
      </table>
    </div>
    <div class="table">
      <h2 class="inherit">日常生活形态</h2>
      <table>
        <tr>
          <Item
            header
            label="食欲"
            :value="
              formatOptions('日常生活形态', 'line1', '食欲选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            class="w-45"
            header
            label="体重"
            :value="form[config['日常生活形态']['line2']['体重'].key].value"
            :unit="
              form[config['日常生活形态']['line2']['体重'].key].value &&
              config['日常生活形态']['line2']['体重'].unit
            "
          />
          <Item
            label="身高"
            label-width="54px"
            :value="form[config['日常生活形态']['line2']['身高'].key].value"
            :unit="
              form[config['日常生活形态']['line2']['身高'].key].value &&
              config['日常生活形态']['line2']['身高'].unit
            "
          />
        </tr>
        <tr>
          <Item
            class="w-45"
            header
            label="BMI(体重指数)"
            :value="form[config['日常生活形态']['line2']['BMI'].key].value"
            style="min-width: calc(45% - 43px)"
          />
          <Item
            label="3—6个月体重变化"
            :value="
              form[config['日常生活形态']['line2']['3—6个月体重变化'].key].value
            "
          />
          <Item
            v-if="
              form[config['日常生活形态']['line2']['3—6个月体重变化内容'].key]
                .value
            "
            :value="
              form[config['日常生活形态']['line2']['3—6个月体重变化内容'].key]
                .value
            "
            :unit="config['日常生活形态']['line2']['3—6个月体重变化内容'].unit"
          />
        </tr>
        <tr>
          <Item
            header
            label="排尿"
            :value="
              formatOptions('日常生活形态', 'line3', '排尿选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="排便"
            :value="
              formatOptions('日常生活形态', 'line4', '排便选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="睡眠"
            :value="form[config['日常生活形态']['line5']['睡眠'].key].value"
            :unit="config['日常生活形态']['line5']['睡眠'].unit"
            style="min-width: calc(25% - 18px)"
          />
          <Item
            class="w-20"
            :value="
              formatOptions('日常生活形态', 'line5', '睡眠选项', '选项', '内容')
            "
          />
          <Item
            class="w-20"
            label="辅助睡眠药物"
            :value="
              formatOptions(
                '日常生活形态',
                'line5',
                '辅助睡眠药物选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="辅助用具"
            :value="
              formatOptions(
                '日常生活形态',
                'line6',
                '辅助用具选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2 class="inherit">心理社会评估</h2>
      <table>
        <tr>
          <Item
            header
            label="情绪情感"
            :value="
              formatOptions(
                '心里社会评估',
                'line1',
                '情绪情感选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="性格特点"
            :value="form[config['心里社会评估']['line2']['性格特点'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="对情绪控制能力"
            :value="
              form[config['心里社会评估']['line2']['对情绪控制能力'].key].value
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="心情温度计自我检测"
            :value="
              form[config['心里社会评估']['line3']['心情温度计自我检测'].key]
                .value
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="社会层面"
            :value="
              form[config['心里社会评估']['line3']['社会层面'].key].value ==
              '其他'
                ? form[config['心里社会评估']['line3']['社会层面内容'].key]
                    .value
                : form[config['心里社会评估']['line3']['社会层面'].key].value
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="家属态度"
            :value="
              formatOptions(
                '心里社会评估',
                'line4',
                '家属态度选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>出院计划</h2>
      <table>
        <tr>
          <Item
            header
            label="出院后去处"
            :value="
              formatOptions(
                '出院计划',
                'line1',
                '出院后去处选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="出院后照顾"
            :value="form[config['出院计划']['line1']['出院后照顾者'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="交通工具"
            :value="form[config['出院计划']['line1']['交通工具'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="康复器具"
            :value="
              formatOptions('出院计划', 'line2', '康复器具选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="其他预期需求"
            :value="
              formatOptions(
                '出院计划',
                'line2',
                '其他预期需求选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
      </table>
    </div>

    <table class="sum">
      <tr>
        <td class="label">资料来源</td>
        <td>{{ data.dataSrc === '其他' ? data.dataExt : data.dataSrc }}</td>
      </tr>
      <tr>
        <td class="label">评估时间</td>
        <td>
          <span>{{ formatTime(data.pfTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
          <span class="sign">评估护士签名：{{ data.updateName }}</span>
        </td>
      </tr>
      <tr>
        <td>
          <span>此表适用于</span>
          <span>≥12周岁</span>
          <span>≤18周岁</span>
          <span>青少年</span>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'

import { formatTime } from '@/utils/format'
import config from '@/views/homeNew/evaluation/json/teenagers.json' //配置信息

import Item from '../RYItem.vue'

export default defineComponent({
  components: { Item },
  props: {
    data: {
      type: Object,
      default: () => {
        return { jsonText: '{}' }
      }
    }
  },
  setup(props) {
    const state = reactive({
      date: '',
      value: '12',
      config: config,
      form: {}
    })

    function initData() {
      //初始化数据
      const form = {}, //表单对象
        config = cloneDeep(state.config) //配置项
      for (const region in config) {
        //遍历isVisible为true的对象-每个区域
        if (config[region].info.isVisible) {
          for (const line in config[region]) {
            //遍历除了info的对象-每行
            if (line != 'info') {
              for (const item in config[region][line]) {
                //遍历除了info的对象-每个formitem
                if (item != 'info') {
                  const obj = config[region][line][item]
                  form[obj.key] = {
                    label: obj.title,
                    value: ''
                  }
                }
              }
            }
          }
        }
      }
      //由于Object.assign对于子对象的处理是直接覆盖，所以需要循环赋值，用于保留子对象的其余参数
      const _data = JSON.parse(props.data.jsonText) || {}
      for (const i in form) {
        form[i] = Object.assign(form[i], _data[i] || '')
      }
      state.form = form
    }

    function formatOptions(el1, el2, el3, reText = '选项', text = '其他') {
      const obj = config[el1][el2][el3]
      let returnText
      if (Array.isArray(state.form[obj.key].value)) {
        const myarray = []
        state.form[obj.key].value.map(item => {
          if (obj.resetCont === item || obj.unitBool) {
            el3 = reText ? el3.replace(reText, text) : el3 + text
            myarray.push(state.form[config[el1][el2][el3].key].value)
          } else {
            myarray.push(item)
          }
        })
        returnText = myarray.join('，')
      } else {
        if (obj.resetCont === state.form[obj.key].value || obj.unitBool) {
          el3 = reText ? el3.replace(reText, text) : el3 + text
          returnText = state.form[config[el1][el2][el3].key].value
        } else {
          returnText = state.form[obj.key].value
        }
      }
      return returnText
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      formatTime,
      formatOptions
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

.container {
  padding-top: getpx(50);
  margin: getpx(30) auto 0;
  width: calc(100% - 126px);
  border-top: 1px solid #000;
  font-family: SiYuanSong-Medium;
}

table {
  margin-left: -1px;
  border-collapse: collapse;

  tr {
    display: flex;
    align-items: center;
    border: $border;

    &:not(:first-child) {
      margin-top: -1px;
    }

    td {
      padding: 2px;
      height: getpx(65);
      display: flex;
      align-items: center;
      font-size: getpx(36);
    }
  }
}

.table {
  display: grid;
  grid-template-columns: getpx(170) auto;
  box-sizing: border-box;

  & + .table {
    margin-top: -1px;
  }

  h2 {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: normal;
    font-size: getpx(55);
    letter-spacing: getpx(10);
    border: $border;
    writing-mode: vertical-lr;

    &.inherit {
      writing-mode: inherit;
      letter-spacing: 0;
    }
  }
}

.sum {
  margin: -1px 0 0;
  width: 100%;

  tr {
    td {
      &.label {
        width: getpx(404);
        height: getpx(65);
        justify-content: center;
        border-right: 1px solid #000;
        font-size: getpx(48);

        &::after {
          content: ':';
        }
      }

      span {
        display: inline-block;

        &.sign {
          width: 50%;
          text-align: left;
        }
      }
    }

    &:nth-child(2) {
      td {
        &:nth-child(2) {
          flex: 2;
          justify-content: space-between;
        }
      }
    }

    &:nth-child(3) {
      span {
        margin-right: getpx(51);
      }
    }
  }
}

.w-10 {
  min-width: 10%;
}

.w-15 {
  min-width: 15%;
}

.w-16 {
  min-width: 16%;
}

.w-17 {
  min-width: 17%;
}

.w-19 {
  min-width: 19%;
}

.w-20 {
  min-width: 20%;
}

.w-25 {
  min-width: 25%;
}

.w-30 {
  min-width: 30%;
}

.w-33 {
  min-width: 33%;
}

.w-42 {
  min-width: 42%;
}

.w-45 {
  min-width: 45%;
}

.w-58 {
  min-width: 58%;
}

.flex-col {
  flex-direction: column;
}

.h-40 {
  height: 40px;
}

.space-around {
  justify-content: space-around;
}

.i-b {
  display: inline-block;
}

.align-start {
  align-items: flex-start;
}
</style>
